<template>
  <div id="main" ref="main"></div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.barChart();
  },
  methods: {
    barChart() {
      const myChart = echarts.init(this.$refs.main);
      const option = {
        xAxis: {
          type: "value",
          show: false
        },
        yAxis: {
          show: true,
          boundaryGap: true,
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
          axisLine: {
            //y轴
            show: false
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          splitLine: {
            //网格线
            show: false
          }
        },
        series: [
          {
            name: "Direct",
            type: "bar",
            data: [320, 302, 301, 334, 390, 330, 320],
            label: {
              normal: {
                show: true, //是否显示
                position: "insideRight", //文字位置
                formatter: "{c}分" //c后面加单位
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(98, 157, 224)',
                label: {
                  show: true, //开启显示
                  position: "insideRight", //在上方显示
                  distance: 30,
                  textStyle: {
                    //数值样式
                    // color: "black",
                    fontSize: 16
                  }
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>